<template>
  <view class="container">
    <view class="title">交易记录</view>
    
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>
    
    <view v-else-if="transactions.length === 0" class="empty-tip">
      暂无交易记录
    </view>
    
    <view v-else class="transaction-list">
      <view 
        v-for="(item, index) in transactions" 
        :key="index" 
        class="transaction-item"
        :class="{'income': item.isIncome, 'expense': !item.isIncome}"
      >
        <view class="transaction-info">
          <view class="transaction-type">{{ item.type }}</view>
          <view class="transaction-time">{{ item.createTime }}</view>
        </view>
        <view class="transaction-amount">{{ item.amountWithSign }}</view>
      </view>
      
      <view v-if="hasMore" class="load-more" @click="loadMore">
        加载更多
      </view>
      <view v-else class="no-more">
        没有更多数据了
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userId: '',
      transactions: [],
      page: 1,
      limit: 10,
      total: 0,
      loading: true,
      hasMore: false
    };
  },
  onLoad() {
    // 获取当前登录用户ID
    const userInfo = uni.getStorageSync('userInfo');
    if (userInfo) {
      this.userId = userInfo.id;
      this.getTransactionHistory();
    } else {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/login'
        });
      }, 1500);
    }
  },
  methods: {
    // 获取交易记录
    getTransactionHistory() {
      this.loading = true;
      
      uni.request({
        url: '/api/transaction/history',
        method: 'GET',
        data: {
          userId: this.userId,
          page: this.page,
          limit: this.limit
        },
        success: res => {
          this.loading = false;
          
          if (res.data.code === 1) {
            const data = res.data.data;
            
            // 首次加载或刷新
            if (this.page === 1) {
              this.transactions = data.list;
            } else {
              // 加载更多
              this.transactions = [...this.transactions, ...data.list];
            }
            
            this.total = data.total;
            this.hasMore = this.transactions.length < this.total;
          } else {
            uni.showToast({
              title: res.data.msg || '获取交易记录失败',
              icon: 'none'
            });
          }
        },
        fail: err => {
          this.loading = false;
          uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none'
          });
        }
      });
    },
    
    // 加载更多
    loadMore() {
      if (this.hasMore && !this.loading) {
        this.page++;
        this.getTransactionHistory();
      }
    },
    
    // 下拉刷新
    onPullDownRefresh() {
      this.page = 1;
      this.getTransactionHistory();
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1000);
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}
.loading, .empty-tip {
  text-align: center;
  padding: 50rpx 0;
  color: #999;
}
.transaction-list {
  margin-top: 20rpx;
}
.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 5rpx rgba(0,0,0,0.05);
}
.transaction-info {
  display: flex;
  flex-direction: column;
}
.transaction-type {
  font-size: 30rpx;
  margin-bottom: 10rpx;
}
.transaction-time {
  font-size: 24rpx;
  color: #999;
}
.transaction-amount {
  font-size: 32rpx;
  font-weight: bold;
}
.income .transaction-amount {
  color: #07c160;
}
.expense .transaction-amount {
  color: #f5222d;
}
.load-more, .no-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 28rpx;
}
.load-more {
  color: #007aff;
}
</style> 